<template>
  <div class="card-item">
    <input type="hidden" :name="name" ref="hid_img" :data-val-required="warning">
    <p class="img-p">
      <!-- <canvas id="canvas1" style="display: none"></canvas> -->
      <img src="../assets/img/picbg.png" alt="" ref="img">
      <input type="file" ref="file" class="upload" :data-id="identity" v-on:change="upload($event)" />
    </p>
    <p class="text">（{{title}}）</p>
  </div>

</template>

<script>
// import picbg from './../assets/img/picbg.jpg'

export default {
  name: 'FormUploadImg',
  props: ['name', 'title', 'identity', 'warning'],
  data () {
    return {
      fileSize: 600
    }
  },
  methods: {
    upload (e) {
      // console.log(e.target)
      // console.log(this.$refs.file_1)

      let baseThis = this

      let fileObj = this.$refs.file
      let imgObj = this.$refs.img

      let file = fileObj.files[0]

      let id = fileObj.getAttribute('data-id')

      if (!file) {
        return
      }

      if (!/image\/\w+/.test(file.type)) {
        alert('只支持上传图片')
        return false
      }

      if (file.size / 1024 > this.fileSize) {
        // Common.toast("您要上传的身份证照片太大了~", 4500);
        alert('您要上传的身份证照片太大了~')

        return false
      }

      let w = 89
      let h = 75
      let originalScale = w / h // 原图宽高比

      let reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function (e) {
        let imgDataOriginal = this.result

        let img = new Image()

        let quality = 1 // image quality
        let canvas = document.createElement('canvas')
        let drawer = canvas.getContext('2d')
        img.src = imgDataOriginal
        img.onload = function () {
          let thisObj = this

          let width = img.width
          let height = img.height

          let whScale = width / height // 显示宽高比

          let actualHeight = 0
          let actualWidth = 0
          if (width < w && height < h) {
            actualWidth = width

            actualHeight = height
          } else {
            if (whScale <= originalScale) {
              actualWidth = width * (h / height)

              actualHeight = h
            } else {
              actualHeight = height * (w / width)

              actualWidth = w
            }
          }
          canvas.width = actualWidth
          canvas.height = actualHeight

          drawer.drawImage(thisObj, 0, 0, canvas.width, canvas.height)
          let imgData = canvas.toDataURL('image/jpeg', quality)
          // console.log(imgData);
          imgObj.src = imgData
          imgObj.style.opacity = '1'
          // $result.attr('src', imgData)
          // $result.css('opacity', '1')

          // *******************************************************
          // $hid.val(imgDataOriginal);

          baseThis.$options.methods.uploadImg(imgDataOriginal, id, baseThis)
        }
      }
    },
    uploadImg (data, id, baseThis) {
      // debugger
      // baseThis.$ajax.post('uploadImg', {
      //   // p: data,
      //   // id: id
      //   p: '121212',
      //   id: 'id'
      // }).then(function (response) { // 接口返回数据
      //   console.log(response)
      // }).catch((error) => {
      //   console.log(error)
      // })

      baseThis.$ajax({
        method: 'POST',
        url: 'uploadImg',
        data: baseThis.qs.stringify({
          'p': data,
          'id': id
        })
      }).then(function (response) { // 接口返回数据
        console.log(response)
      }).catch((error) => {
        console.log(error)
      })
      baseThis.$emit('getAddress', id)
    }
  }
}
</script>

<style scoped>

</style>
